<template>
  <div class="tag">
    <el-tag type="success"
            v-for="(item,index) in Tags"
            :closable="item.name!=='home'"
            :effect="$route.path===item.path?'dark':'plain'"
            :key="item.path"
            @close="removeTag(item,index)" @click="Topath(item)">{{ item.label }}
    </el-tag>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex"

export default {
  computed: {
    ...mapState({
      Tags: state => state.tab.tagsList
    })
  },
  methods: {
    ...mapMutations({
      close: 'closeTags'
    }),

    removeTag(item, index) {
      //拿到数组的真实的长度
      const length = this.Tags.length - 1
      this.close(item)
      if (item.path !== this.$route.path) {
        return
      }
      if (length === index) {
        this.$router.push({path: this.Tags[index - 1].path})
      } else {
        this.$router.push(
            {path: this.Tags[index].path}
        )
      }

    },
    Topath(item) {
      this.$router.push(
          {path: item.path}
      )
    }
  }

}
</script>

<style lang="less" scoped>
.tag {
  margin-left: 10px;
  margin-top: 15px;
  display: flex;
  .el-tag{
    margin-right: 10px;
  }
}
</style>